<template>
    <div class="challenge-card" :class="{
        completed: challenge.is_completed,
        claimed: challenge.is_claimed,
        [challenge.difficulty]: true
    }">
        <!-- 难度标识 -->
        <div class="difficulty-badge" :class="challenge.difficulty">
            <span>{{ getDifficultyText() }}</span>
        </div>

        <!-- 挑战图标和信息 -->
        <div class="challenge-header">
            <div class="challenge-icon">
                <van-icon :name="challenge.icon || 'star-o'" />
            </div>
            <div class="challenge-info">
                <h4 class="challenge-title">{{ challenge.title }}</h4>
                <p class="challenge-description">{{ challenge.description }}</p>
            </div>
            <div class="challenge-points">
                <van-icon name="diamond-o" />
                <span>{{ challenge.points }}</span>
            </div>
        </div>

        <!-- 进度条 -->
        <div v-if="challenge.progress" class="challenge-progress">
            <div class="progress-info">
                <span class="progress-text">
                    {{ challenge.progress.current }}/{{ challenge.progress.target }}
                </span>
                <span class="progress-percentage">
                    {{ Math.round((challenge.progress.current / challenge.progress.target) * 100) }}%
                </span>
            </div>
            <van-progress :percentage="(challenge.progress.current / challenge.progress.target) * 100" stroke-width="6"
                :color="getProgressColor()" track-color="#f5f5f5" />
        </div>

        <!-- 要求列表 -->
        <div v-if="challenge.requirements && challenge.requirements.length > 0" class="challenge-requirements">
            <div class="requirements-title">Requirements:</div>
            <div class="requirements-list">
                <div v-for="(requirement, index) in challenge.requirements" :key="index" class="requirement-item">
                    <van-icon :name="getRequirementIcon(index)" :class="{ completed: isRequirementCompleted(index) }" />
                    <span>{{ requirement }}</span>
                </div>
            </div>
        </div>

        <!-- 时间限制 -->
        <div v-if="challenge.time_limit" class="time-limit">
            <van-icon name="clock-o" />
            <span>{{ formatTimeLimit(challenge.time_limit) }} time limit</span>
        </div>

        <!-- 过期时间 -->
        <div v-if="challenge.expires_at" class="expiry-info">
            <van-icon name="warning-o" />
            <span>Expires {{ formatExpiryTime(challenge.expires_at) }}</span>
        </div>

        <!-- 操作按钮 -->
        <div class="challenge-actions">
            <!-- 未开始状态 -->
            <van-button v-if="!challenge.is_completed && !challenge.is_claimed" type="primary" size="large" block
                @click="handleStart" :disabled="isExpired()">
                {{ isExpired() ? 'Expired' : 'Start Challenge' }}
            </van-button>

            <!-- 已完成但未领取奖励 -->
            <van-button v-else-if="challenge.is_completed && !challenge.is_claimed" type="success" size="large" block
                @click="handleClaim">
                <van-icon name="gift-o" />
                Claim Reward
            </van-button>

            <!-- 已完成并已领取 -->
            <div v-else class="completed-status">
                <van-icon name="success" />
                <span>Challenge Completed</span>
            </div>
        </div>

        <!-- 完成动效 -->
        <div v-if="challenge.is_completed" class="completion-effect">
            <div class="sparkle" v-for="i in 6" :key="i" :style="getSparkleStyle(i)"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { DailyChallenge } from '@/api/dailyChallenge'

interface Props {
    challenge: DailyChallenge
}

interface Emits {
    (e: 'start', challenge: DailyChallenge): void
    (e: 'complete', challenge: DailyChallenge): void
    (e: 'claim', challenge: DailyChallenge): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 方法
const getDifficultyText = () => {
    switch (props.challenge.difficulty) {
        case 'easy':
            return 'Easy'
        case 'medium':
            return 'Medium'
        case 'hard':
            return 'Hard'
        default:
            return 'Normal'
    }
}

const getProgressColor = () => {
    if (props.challenge.is_completed) {
        return '#07c160'
    }

    switch (props.challenge.difficulty) {
        case 'easy':
            return '#1989fa'
        case 'medium':
            return '#ff976a'
        case 'hard':
            return '#ee0a24'
        default:
            return '#1989fa'
    }
}

const getRequirementIcon = (index: number) => {
    return isRequirementCompleted(index) ? 'success' : 'circle'
}

const isRequirementCompleted = (_index: number) => {
    if (!props.challenge.progress) return false

    // 简单的逻辑：如果总进度完成，则所有要求都完成
    return props.challenge.progress.current >= props.challenge.progress.target
}

const formatTimeLimit = (seconds: number) => {
    if (seconds < 60) {
        return `${seconds}s`
    } else if (seconds < 3600) {
        return `${Math.floor(seconds / 60)}min`
    } else {
        return `${Math.floor(seconds / 3600)}h`
    }
}

const formatExpiryTime = (timestamp: string) => {
    const now = new Date()
    const expiry = new Date(timestamp)
    const diffInHours = Math.floor((expiry.getTime() - now.getTime()) / (1000 * 60 * 60))

    if (diffInHours < 1) {
        const diffInMinutes = Math.floor((expiry.getTime() - now.getTime()) / (1000 * 60))
        return `in ${diffInMinutes}min`
    } else if (diffInHours < 24) {
        return `in ${diffInHours}h`
    } else {
        return 'today'
    }
}

const isExpired = () => {
    if (!props.challenge.expires_at) return false
    return new Date(props.challenge.expires_at) < new Date()
}

const getSparkleStyle = (index: number) => {
    const positions = [
        { top: '10%', left: '20%' },
        { top: '20%', right: '15%' },
        { top: '40%', left: '10%' },
        { top: '60%', right: '20%' },
        { top: '80%', left: '30%' },
        { top: '70%', right: '10%' }
    ]

    return {
        ...positions[index - 1],
        animationDelay: `${index * 0.2}s`
    }
}

const handleStart = () => {
    if (!isExpired()) {
        emit('start', props.challenge)
    }
}

const handleClaim = () => {
    emit('claim', props.challenge)
}
</script>

<style lang="scss" scoped>
.challenge-card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    &.easy {
        border-color: #e8f4fd;

        &:hover {
            box-shadow: 0 8px 24px rgba(25, 137, 250, 0.15);
        }
    }

    &.medium {
        border-color: #fff2e8;

        &:hover {
            box-shadow: 0 8px 24px rgba(255, 151, 106, 0.15);
        }
    }

    &.hard {
        border-color: #ffeaea;

        &:hover {
            box-shadow: 0 8px 24px rgba(238, 10, 36, 0.15);
        }
    }

    &.completed {
        border-color: #e8f5e8;
        background: linear-gradient(135deg, #f0f9ff 0%, #e8f5e8 100%);

        &:hover {
            box-shadow: 0 8px 24px rgba(7, 193, 96, 0.15);
        }
    }

    &.claimed {
        opacity: 0.8;
    }

    .difficulty-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;

        &.easy {
            background: #e8f4fd;
            color: #1989fa;
        }

        &.medium {
            background: #fff2e8;
            color: #ff976a;
        }

        &.hard {
            background: #ffeaea;
            color: #ee0a24;
        }
    }

    .challenge-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;

        .challenge-icon {
            width: 48px;
            height: 48px;
            background: #f0f8ff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            .van-icon {
                font-size: 24px;
                color: #1989fa;
            }
        }

        .challenge-info {
            flex: 1;

            .challenge-title {
                font-size: 16px;
                font-weight: 600;
                color: #323233;
                margin: 0 0 6px 0;
                line-height: 1.3;
            }

            .challenge-description {
                font-size: 14px;
                color: #646566;
                line-height: 1.4;
                margin: 0;
            }
        }

        .challenge-points {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;

            .van-icon {
                color: #ffd21e;
                font-size: 20px;
            }

            span {
                font-size: 14px;
                font-weight: 600;
                color: #323233;
            }
        }
    }

    .challenge-progress {
        margin-bottom: 16px;

        .progress-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;

            .progress-text {
                color: #323233;
                font-weight: 500;
            }

            .progress-percentage {
                color: #1989fa;
                font-weight: 600;
            }
        }
    }

    .challenge-requirements {
        margin-bottom: 16px;

        .requirements-title {
            font-size: 13px;
            font-weight: 500;
            color: #646566;
            margin-bottom: 8px;
        }

        .requirements-list {
            .requirement-item {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 6px;
                font-size: 13px;
                color: #646566;

                .van-icon {
                    font-size: 14px;
                    color: #dcdee0;

                    &.completed {
                        color: #07c160;
                    }
                }
            }
        }
    }

    .time-limit {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        font-size: 12px;
        color: #969799;

        .van-icon {
            color: #1989fa;
        }
    }

    .expiry-info {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        font-size: 12px;
        color: #ee0a24;

        .van-icon {
            font-size: 14px;
        }
    }

    .challenge-actions {
        .completed-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: #e8f5e8;
            border-radius: 8px;
            color: #07c160;
            font-size: 14px;
            font-weight: 500;

            .van-icon {
                font-size: 16px;
            }
        }
    }

    .completion-effect {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;

        .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ffd21e;
            border-radius: 50%;
            animation: sparkle 2s ease-in-out infinite;
        }
    }
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>